<div
	class="flex flex-col max-w-xl p-8 shadow-sm rounded-xl lg:p-12"
	[ngClass]="['bg' + contrast, 'text' + defaultInv]"
>
	<div class="flex flex-col items-center w-full">
		<h2 class="text-3xl font-semibold text-center">Your opinion matters!</h2>
		<div class="flex flex-col items-center py-6 space-y-3">
			<span class="text-center">How was your experience?</span>
			<div class="flex space-x-3">
				<button
					*ngFor="let i of [1, 2, 3, 4, 5]"
					type="button"
					title="Rate {{ i }} stars"
					attr.aria-label="Rate {{ i }} stars"
				>
					<svg
						class="w-10 h-10"
						[ngClass]="[i > 4 ? 'text' + plain : 'text-yellow-500']"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
						/>
					</svg>
				</button>
			</div>
		</div>
		<div class="flex flex-col w-full">
			<textarea
				rows="3"
				class="p-4 rounded-md resize-none"
				[ngClass]="['text' + defaultInv, 'bg' + contrast]"
				placeholder="Message..."
			></textarea>
			<button
				type="button"
				class="py-4 my-8 font-semibold rounded-md"
				[ngClass]="['text' + contrast, 'bg' + primary]"
			>
				Leave feedback
			</button>
		</div>
	</div>
	<div class="flex items-center justify-center">
		<a rel="noopener noreferrer" href="#" class="text-sm" [ngClass]="['text' + plainInv]">
			Maybe later
		</a>
	</div>
</div>
